<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3415111_yx3kl1epmuo.css">
    <link rel="stylesheet" href="./assist/swiper-7.4.1/swiper/swiper-bundle.min.css">
    <script src="./assist/swiper-7.4.1/swiper/swiper-bundle.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/index.js"></script>
</head>

<body>
    <iframe src="./html/header.html" frameborder="0" scrolling="no" width="100%" height="160px"></iframe>
    <!-- 导航 -->
    <section>
        <ul class="sec-nav">
            <li><a href="./index.html">首页</a></li>
            <li><a href="./html/all-flower.html">鲜花</a></li>
            <li><a href="#">水果花束</a></li>
            <li><a href="#">设计师臻选</a></li>
            <li><a href="#">星座专场</a></li>
            <li><a href="#">永生瓶花</a></li>
            <li>
                <a href="#">鲜花批发</a>
                <div class="nav-wholesale">
                    <ul>
                        <li><a href="">玫瑰花</a></li>
                        <li><a href="">洋桔梗</a></li>
                        <li><a href="">绣球花</a></li>
                        <li><a href="">康乃馨</a></li>
                        <li><a href="">百合花</a></li>
                        <li><a href="">向日葵</a></li>
                        <li><a href="">郁金香</a></li>
                        <li><a href="">满天星</a></li>
                        <li><a href="">乒乓菊</a></li>
                        <li><a href="">紫罗兰</a></li>
                        <li><a href="">雏菊</a></li>
                        <li><a href="">黄莺</a></li>
                        <li><a href="">相思梅</a></li>
                        <li><a href="">勿忘我</a></li>
                        <li><a href="">马蹄莲</a></li>
                        <li><a href="">扶郎花</a></li>
                        <li><a href="">菊花</a></li>
                        <li><a href="">马蹄莲</a></li>
                        <li><a href=""></a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">绿植专区</a></li>
            <li><a href="#">花语大全</a></li>
        </ul>
    </section>
    <!-- 轮播图 -->
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./images/swiper1.png" alt=""></div>
            <div class="swiper-slide"><img src="./images/swiper2.png" alt=""></div>
            <div class="swiper-slide"><img src="./images/swiper3.png" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
    <!-- 详情 -->
    <div class="all">
        <ul>
            <li><a href="#"><img src="./images/all01.png" alt=""></a></li>
            <li>
                <a class="all-one" href="#"><img src="./images/all02.png" alt=""></a>
                <a class="all-two" href="#"><img src="./images/all03.png" alt=""></a>
            </li>
            <li><a href="#"><img src="./images/all04.png" alt=""></a></li>
            <li>
                <div class="all-one">
                    <a class="all-f" href="#"><img src="./images/all05.png" alt=""></a>
                    <a class="all-t" href=""><img src="./images/all06.png" alt=""></a>
                </div>
                <a class="all-two" href="#"><img src="./images/all07.png" alt=""></a>
            </li>
        </ul>
    </div>
    <!-- 今日推荐 -->
    <div class="recommend">
        <p class="rec">今日推荐</p>
        <ul>
            <!-- <li>
                <a href="#" target="_blank">
                    <img src="./images/recommend1.png" alt="">
                    <p>星语心愿</p>
                    <span>￥199</span>
                </a>
            </li> -->
        </ul>
    </div>
    <!-- 爱情鲜花 -->
    <div class="love">
        <div class="lo-confession">爱情表白
            <span class="lo-love">爱上一个人就爱上了她的全部</span>
            <span class="lo-more"><a href="#">更多<span class="iconfont icon-youjiantou"></span></a></span>
        </div>
        <img src="./images/love.png" alt="">
        <ul>
            <!-- <li>
                <a href="#" target="_blank">
                    <img src="./images/recommend1.png" alt="">
                    <p>星语心愿</p>
                    <span>￥199</span>
                </a>
            </li> -->
        </ul>
    </div>
    <!-- 生日祝福 -->
    <div class="birthday">
        <div class="bir-bless">生日祝福
            <span class="bir-friend">朋友不曾孤单过 一声朋友你会懂</span>
            <span class="bir-more"><a href="#">更多<span class="iconfont icon-youjiantou"></span></a></span>
        </div>
        <img src="./images/birthday.png" alt="">
        <ul>
            <!-- <li>
                <a href="#" target="_blank">
                    <img src="./images/recommend1.png" alt="">
                    <p>星语心愿</p>
                    <span>￥199</span>
                </a>
            </li> -->
        </ul>
    </div>
    <!-- 长辈 -->
    <div class="elder">
        <div class="el-flower">长辈父母
            <span class="el-flo">给你甜蜜的味道，就像沙漠中的一汪清泉</span>
            <span class="el-more"><a href="#">更多<span class="iconfont icon-youjiantou"></span></a></span>
        </div>
        <img src="./images/elder.png" alt="">
        <ul>
            <!-- <li>
            <a href="#" target="_blank">
                <img src="./images/recommend1.png" alt="">
                <p>星语心愿</p>
                <span>￥199</span>
            </a>
            </li> -->
        </ul>
    </div>
    <!-- 商务 -->
    <div class="business">
        <div class="bus-flower">商务用花
            <span class="bus-flo">行动是成功的阶梯，行动越多，登得越高</span>
            <span class="bus-more"><a href="#">更多<span class="iconfont icon-youjiantou"></span></a></span>
        </div>
        <img src="./images/business.png" alt="">
        <ul>
            <!-- <li>
                <a href="#" target="_blank">
                    <img src="./images/recommend1.png" alt="">
                    <p>星语心愿</p>
                    <span>￥199</span>
                </a>
            </li> -->
        </ul>
    </div>
    <!-- 侧边固定 -->
    <div class="fixation">
        <ul>
            <li><span class="iconfont icon-kefu"></span>客服</li>
            <li><span class="iconfont icon-24gl-bag"></span>购物袋</li>
            <li><span class="iconfont icon-fankui"></span>反馈</li>
            <li id="top"><span class="iconfont icon-huidaodingbu_huaban1"></span>回到顶部</li>

        </ul>
    </div>
    <!-- 尾部 -->
    <iframe src="./html/footer.html" frameborder="0" scrolling="no" width="100%" height="630px"></iframe>
    <!-- 轮播图样式 -->
    <script>
        var mySwiper = new Swiper('.swiper', {
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // autoplay: true,//等同于以下设置
            autoplay: {
                delay: 2000,
                pauseOnMouseEnter: true,
                disableOnInteraction: false,
            },
            effect: 'fade',
        })       
    </script>
</body>

</html>